<template>
	<footer class="aui-bar aui-bar-tab" id="footer" style="border-top:1px solid #ddd; background:#efefef">
		<div class="aui-bar-tab-item" :class="currentNav=='/'?'aui-active':''" tapmode>
			<!-- .native 修饰符，点击事件才会生效，因为我们在 router-link标签上面加的点击事件-->
			<router-link to="/" @click.native="navAct">
				<i class="aui-iconfont aui-icon-home"></i>
				<div class="aui-bar-tab-label">首页</div>
			</router-link>
		</div>
		<div class="aui-bar-tab-item" :class="currentNav=='/focus'?'aui-active':''" tapmode>
			<router-link to="/focus" @click.native="navAct">
				<i class="aui-iconfont aui-icon-like"></i>
				<div class="aui-bar-tab-label">要闻</div>
			</router-link>
		</div>
		<div class="aui-bar-tab-item" :class="currentNav=='/video'?'aui-active':''" tapmode>
			<router-link to="/video" @click.native="navAct">
				<i class="aui-iconfont aui-icon-video"></i>
				<div class="aui-bar-tab-label">视频</div>
			</router-link>
		</div>
		<div class="aui-bar-tab-item" :class="currentNav=='/my'?'aui-active':''" tapmode>
			<router-link to="/my" @click.native="navAct">
				<i class="aui-iconfont aui-icon-my"></i>
				<div class="aui-bar-tab-label">我的</div>
			</router-link>
		</div>
	</footer>
</template>

<script>
	export default{
		name: 'newsFooter',
		// data:{
		// 	currentNav: '/'		// 定义的变量，当前导航，默认首页
		// },
		data(){	// 使用data函数，给变量赋值，在该函数，写return
			return {
				currentNav: '/'		//初始值， 定义的变量，当前导航，默认首页
			}
		},
		created(){
			// 页面内容渲染前就会执行的函数，地址已经定下来
			// console.log(this.$route.path)
			this.currentNav = this.$route.path;
		},
		methods:{
			// 事件函数
			navAct(){
				// 更改变量的值
				// console.log(this.$data.currentNav)	// 变量值   
				// console.log(this.$route.path)	// 当前路由地址  /my
				this.$data.currentNav = this.$route.path
			}
		}
	}

</script>

<style>

</style>